<template>
  <div class="test-form">
    <h1>Form 表单</h1>
    <p>具有数据收集、校验和提交功能的表单，包含复选框、单选框、输入框、下拉选择框等元素。</p>
    <br>
    <Form ref="formModel" :model="formModel" :rules="formRule" :labelWidth="100" labelPosition="right" :inline="false">
      <form-item label="客户名称" prop="name" :rules="{required: true, type: 'string', message: '请输入内容', trigger: 'blur'}">
        <Input class="input" placeholder="请输入客户名称" v-model="formModel.name"></Input>
      </form-item>
      <form-item label="客户简称" prop="short">
        <Input class="input" placeholder="请输入客户简称" v-model="formModel.short"></Input>
      </form-item>
      <form-item label="门店数量" prop="shopNum">
        <Input class="input" placeholder="请输入门店数量" v-model="formModel.shopNum"></Input>
      </form-item>
      <form-item label="客户业态" prop="client">
        <Select v-model="formModel.client">
          <Option
            v-for="(o, i) in selectData"
            :key="i"
            :value="o.value"
            :label="o.label"></Option>
        </Select>
      </form-item>
      <form-item label="客户类别" prop="category">
        <Cascader placeholder="请选择城市" v-model="formModel.category" :data="cityData"></Cascader>
      </form-item>
      <form-item label="客户状态" prop="state">
        <sh-switch v-model="formModel.state"></sh-switch>
      </form-item>
      <form-item label="签约时间" prop="time">
        <DatePicker v-model="formModel.time" placement="top-start" type="daterange" format="yyyy年MM月dd日" style="width: 250px" placeholder="请选择日期"></DatePicker>
      </form-item>
      <form-item label="配送模式" prop="pattern">
        <CheckboxGroup v-model="formModel.pattern">
          <Checkbox label="D+1模式"></Checkbox>
          <Checkbox label="D+2模式"></Checkbox>
          <Checkbox label="D+3模式"></Checkbox>
          <Checkbox label="D+4模式"></Checkbox>
        </CheckboxGroup>
      </form-item>
      <form-item label="是否带仓" prop="iscang">
        <RadioGroup v-model="formModel.iscang">
          <Radio label="是"></Radio>
          <Radio label="否"></Radio>
        </RadioGroup>
      </form-item>
      <form-item label="备选信息" prop="message">
        <Input type="textarea" class="input" v-model="formModel.message" placeholder="请输入备选信息（选填）"></Input>
      </form-item>
      <form-item>
        <Button type="primary" @click="handleSubmit">提交信息</Button>
        <Button type="info">取消提交</Button>
      </form-item>
    </Form>
    <p>设置属性 <code>inline</code> ，表单元素可以水平排列。</p>
    <p>在 <code>Form</code> 组件内，每个表单域由 <code>form-item</code> 组成。</p>
    <p>可包含的控件有：<code>Input</code> 、 <code>Radio</code> 、 <code>Checkbox</code> 、<code>sh-switch</code> 、 <code>Select</code> 、 <code>Cascader</code> 、 <code>InputNumber</code> 、<code>Upload</code> 。</p>
    <p>设置属性 <code>labelPosition</code> ，可以改变表单域标签的位置， <code>left</code>  为左对齐， <code>right</code>  为右对齐， <code>top</code> 会置于表单域顶部。</p>
    <p> <code>Form</code> 组件基于 <a href="https://github.com/yiminghe/async-validator">async-validator</a> 实现的数据验证，给 <code>Form</code> 设置属性 <code>rules</code> ，同时给需要验证的 <code>form-item</code> 设置属性 <code>prop</code> 指向对于字段即可。</p>
    <p>可以完全自定义验证规则来完成更复杂的验证，比如某些数据需要在服务端验证时。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Form :model=&quot;formModel&quot; :rules=&quot;formRule&quot; :labelWidth=&quot;100&quot; labelPosition=&quot;left&quot; :inline=&quot;false&quot;&gt;
          &lt;form-item label=&quot;客户名称&quot; prop=&quot;name&quot; :rules=&quot;{required: true, type: 'string', message: '请输入内容', trigger: 'change'}&quot;&gt;
            &lt;Input class=&quot;input&quot; placeholder=&quot;请输入客户名称&quot; v-model=&quot;formModel.name&quot;&gt;&lt;/Input&gt;
          &lt;/form-item&gt;
          &lt;form-item label=&quot;客户简称&quot; prop=&quot;short&quot;&gt;
            &lt;Input class=&quot;input&quot; placeholder=&quot;请输入客户简称&quot; v-model=&quot;formModel.short&quot;&gt;&lt;/Input&gt;
          &lt;/form-item&gt;
          &lt;form-item label=&quot;门店数量&quot; prop=&quot;shopNum&quot;&gt;
            &lt;Input class=&quot;input&quot; placeholder=&quot;请输入门店数量&quot; v-model=&quot;formModel.shopNum&quot;&gt;&lt;/Input&gt;
          &lt;/form-item&gt;
          &lt;form-item label=&quot;客户业态&quot; prop=&quot;client&quot;&gt;
            &lt;Select v-model=&quot;formModel.client&quot;&gt;
              &lt;Option
                v-for=&quot;(o, i) in selectData&quot;
                :key=&quot;i&quot;
                :value=&quot;o.value&quot;
                :label=&quot;o.label&quot;&gt;&lt;/Option&gt;
            &lt;/Select&gt;
          &lt;/form-item&gt;
          &lt;form-item label=&quot;客户状态&quot; prop=&quot;state&quot;&gt;
            &lt;sh-switch v-model=&quot;formModel.state&quot;&gt;&lt;/sh-switch&gt;
          &lt;/form-item&gt;
          &lt;form-item label=&quot;签约时间&quot; prop=&quot;time&quot;&gt;

          &lt;/form-item&gt;
          &lt;form-item label=&quot;配送模式&quot; prop=&quot;pattern&quot;&gt;
            &lt;CheckboxGroup v-model=&quot;formModel.pattern&quot;&gt;
              &lt;Checkbox label=&quot;D+1模式&quot;&gt;&lt;/Checkbox&gt;
              &lt;Checkbox label=&quot;D+2模式&quot;&gt;&lt;/Checkbox&gt;
              &lt;Checkbox label=&quot;D+3模式&quot;&gt;&lt;/Checkbox&gt;
              &lt;Checkbox label=&quot;D+4模式&quot;&gt;&lt;/Checkbox&gt;
            &lt;/CheckboxGroup&gt;
          &lt;/form-item&gt;
          &lt;form-item label=&quot;是否带仓&quot; prop=&quot;iscang&quot;&gt;
            &lt;RadioGroup v-model=&quot;formModel.iscang&quot;&gt;
              &lt;Radio label=&quot;是&quot;&gt;&lt;/Radio&gt;
              &lt;Radio label=&quot;否&quot;&gt;&lt;/Radio&gt;
            &lt;/RadioGroup&gt;
          &lt;/form-item&gt;
          &lt;form-item label=&quot;备选信息&quot; prop=&quot;message&quot;&gt;
            &lt;Input type=&quot;textarea&quot; class=&quot;input&quot; v-model=&quot;formModel.message&quot; placeholder=&quot;请输入备选信息（选填）&quot;&gt;&lt;/Input&gt;
          &lt;/form-item&gt;
          &lt;form-item&gt;
            &lt;Button type=&quot;primary&quot;&gt;提交信息&lt;/Button&gt;
            &lt;Button type=&quot;info&quot;&gt;取消提交&lt;/Button&gt;
          &lt;/form-item&gt;
        &lt;/Form&gt;
      &lt;/template&gt;
      &lt;script&gt;
        export default {
          data () {
            const validatorInput = (rule, value, callback) =&gt; {
              if (value === '') {
                callback(new Error('请输入内容'));
              } else {
                callback()
              }
            }
            return {
              formModel: {
                name: '',
                short: '',
                shopNum: '',
                client: '',
                state: true,
                time: '',
                pattern: ['D+1模式'],
                iscang: '是',
                message: ''
              },
              formRule: {
                shopNum: [{required: true, type: 'string', message: '请输入内容', trigger: 'change'}],
                short: [{required: true, validator: validatorInput, trigger: 'blur'}],
                cascader: [{required: true, trigger: 'change'}],
                client: [{required: true, trigger: 'change'}],
                iscang: [{required: true, trigger: 'change'}],
                pattern: [{required: true, type: 'Array', trigger: 'change'}],
                state: [{required: true, trigger: 'change'}]
              },
              cityData: [
                {
                  value: 'beijing',
                  label: '北京',
                  children: [
                    {
                      value: 'gugong',
                      label: '故宫'
                    },
                    {
                      value: 'tiantan',
                      label: '天坛',
                      disabled: true
                    },
                    {
                      value: 'wangfujing',
                      label: '王府井'
                    }
                  ]
                },
                {
                  value: 'jiangsu',
                  label: '江苏',
                  // disabled: true,
                  children: [
                    {
                      value: 'nanjing',
                      label: '南京',
                      children: [
                        {
                          value: 'fuzimiao',
                          label: '夫子庙',
                        }
                      ]
                    },
                    {
                      value: 'suzhou',
                      label: '苏州',
                      children: [
                        {
                          value: 'zhuozhengyuan',
                          label: '拙政园',
                        },
                        {
                          value: 'shizilin',
                          label: '狮子林',
                        }
                      ]
                    }
                  ]
                },
                {
                  value: 'xi an',
                  label: '西安',
                  disabled: true
                },
                {
                  value: 'xianyang',
                  label: '咸阳'
                }
              ],
              selectData: [
                {
                  label: '张三',
                  value: '1'
                },
                {
                  label: '李四',
                  value: '2',
                  disabled: true
                },
                {
                  label: '王五',
                  value: '3'
                },
                {
                  label: '赵六',
                  value: '4'
                }
              ]
            }
          }
        }
      &lt;/script&gt;
    </pre>
    <h2>API</h2>
    <p>Form props</p>
    <Table :columns="tableColumn" :data="tableData"></Table>
    <br>
    <p>Form methods</p>
    <Table :columns="tableColumn1" :data="tableData1"></Table>
    <br>
    <p>form-item props</p>
    <Table :columns="tableColumn2" :data="tableData2"></Table>
  </div>
</template>

<script>
export default {
  name: 'TestForm',
  data () {
    const validatorInput = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入内容'))
      } else {
        callback()
      }
    }
    return {
      tableColumn: [
        {
          title: '属性',
          key: 'attribute'
        },
        {
          title: '说明',
          key: 'explain',
          width: 400,
          tooltip: true
        },
        {
          title: '类型',
          key: 'type'
        },
        {
          title: '默认值',
          key: 'default'
        }
      ],
      tableData: [
        {
          attribute: 'model',
          explain: '表单数据对象',
          type: 'Object',
          default: '-'
        },
        {
          attribute: 'rules',
          explain: '表单验证规则，具体配置查看  async-validator',
          type: 'Object',
          default: '-'
        },
        {
          attribute: 'inline',
          explain: '是否开启行内表单模式',
          type: 'Boolen',
          default: 'false'
        },
        {
          attribute: 'labelPosition',
          explain: '表单域标签的位置，可选值为 left、right、top',
          type: 'String',
          default: 'right'
        },
        {
          attribute: 'labelWidth',
          explain: '表单域标签的宽度，所有的 Form-item 都会继承 Form 组件的 labelWidth 的值',
          type: 'Number',
          default: '-'
        }
      ],
      tableColumn1: [
        {
          title: '事件名',
          key: 'event'
        },
        {
          title: '说明',
          key: 'type',
          width: 500,
          tooltip: true
        },
        {
          title: '返回值',
          key: 'callback'
        }
      ],
      tableData1: [
        {
          event: 'validate',
          type: '对整个表单进行校验，参数为检验完的回调，会返回一个 Boolean 表示成功与失败',
          callback: 'callback'
        },
        {
          event: 'validateField',
          type: '对部分表单字段进行校验的方法，参数1为需校验的 prop，参数2为检验完回调，同上',
          callback: 'callback'
        },
        {
          event: 'resetFields',
          type: '对整个表单进行重置，将所有字段值重置为空并移除校验结果',
          callback: '无'
        }
      ],
      tableColumn2: [
        {
          title: '属性',
          key: 'attribute'
        },
        {
          title: '说明',
          key: 'explain',
          tooltip: true
        },
        {
          title: '类型',
          key: 'type'
        },
        {
          title: '默认值',
          key: 'default'
        }
      ],
      tableData2: [
        {
          attribute: 'prop',
          explain: '对于表单域 model 里的字段',
          type: 'String',
          default: '-'
        },
        {
          attribute: 'label',
          explain: '标签文本',
          type: 'String',
          default: '-'
        },
        {
          attribute: 'labelWidth',
          explain: '表单域标签的的宽度',
          type: 'Number',
          default: '-'
        },
        {
          attribute: 'required',
          explain: '是否必填，如不设置，则会根据校验规则自动生成',
          type: 'Boolean',
          default: '-'
        },
        {
          attribute: 'rules',
          explain: '表单验证规则',
          type: 'Number',
          default: '-'
        },
        {
          attribute: 'error',
          explain: '表单域验证错误信息, 设置该值会使表单验证状态变为error，并显示该错误信息',
          type: 'String',
          default: '-'
        },
        {
          attribute: 'showMessage',
          explain: '是否显示校验错误信息',
          type: 'Boolean',
          default: 'true'
        }
      ],
      formModel: {
        name: '',
        short: '',
        shopNum: '',
        client: '',
        category: [],
        state: true,
        time: '',
        pattern: ['D+1模式'],
        iscang: '是',
        message: ''
      },
      formRule: {
        shopNum: [{ required: true, type: 'string', message: '请输入内容', trigger: 'blur' }],
        short: [{ required: true, validator: validatorInput, trigger: 'change' }],
        category: [{ required: true, type: 'array', min: 1, trigger: 'change' }],
        cascader: [{ required: true, type: 'array', min: 1, trigger: 'change' }],
        client: [{ required: true, trigger: 'change' }],
        iscang: [{ required: true, trigger: 'change' }],
        pattern: [{ required: true, type: 'array', min: 1, trigger: 'change' }],
        state: [{ required: true, type: 'boolean', trigger: 'change' }]
      },
      cityData: [
        {
          value: 'beijing',
          label: '北京',
          children: [
            {
              value: 'gugong',
              label: '故宫'
            },
            {
              value: 'tiantan',
              label: '天坛',
              disabled: true
            },
            {
              value: 'wangfujing',
              label: '王府井'
            }
          ]
        },
        {
          value: 'jiangsu',
          label: '江苏',
          // disabled: true,
          children: [
            {
              value: 'nanjing',
              label: '南京',
              children: [
                {
                  value: 'fuzimiao',
                  label: '夫子庙'
                }
              ]
            },
            {
              value: 'suzhou',
              label: '苏州',
              children: [
                {
                  value: 'zhuozhengyuan',
                  label: '拙政园'
                },
                {
                  value: 'shizilin',
                  label: '狮子林'
                }
              ]
            }
          ]
        },
        {
          value: 'xi an',
          label: '西安',
          disabled: true
        },
        {
          value: 'xianyang',
          label: '咸阳'
        }
      ],
      selectData: [
        {
          label: '张三',
          value: '1'
        },
        {
          label: '李四',
          value: '2',
          disabled: true
        },
        {
          label: '王五',
          value: '3'
        },
        {
          label: '赵六',
          value: '4'
        }
      ]
    }
  },
  methods: {
    handleSubmit () {
      this.$refs.formModel.validate((valid) => {
        if (valid) {
          console.log(valid)
        } else {
          console.log(valid)
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
  .test-form {
    .input {
      width: 250px;
    }
  }
  h1 {
    font-size: 18px;
  }
  h2 {
    font-size: 14px;
    margin-bottom: 10px;
  }
  code {
    background-color: #aaa;
  }
  pre {
    font-size: 14px;
  }
  span {
    margin-left: 10px;
  }
  p {
    padding: 5px 0;
  }
</style>
